.data-charts {
  height: 100%;
}

.data-charts .chart-card {
  height: 100%;
}

.data-charts .chart-card .ant-card-body {
  padding: 12px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}

.data-charts .chart-container {
  flex: 1;
  position: relative;
  min-height: 200px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px;
}

.data-charts .chart-controls {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.data-charts .control-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.data-charts .control-item .ant-slider {
  margin: 0;
}

/* Chart.js 样式覆盖 */
.data-charts .chart-container canvas {
  background: transparent !important;
}

/* 图表标题样式 */
.data-charts .ant-card-head-title {
  color: #4fc3f7 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* 图表容器悬停效果 */
.data-charts .chart-container:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(79, 195, 247, 0.3);
  transition: all 0.3s ease;
}

/* 控制项样式 */
.data-charts .control-item .ant-slider-track {
  background: linear-gradient(90deg, #ff9800, #f57c00) !important;
}

.data-charts .control-item .ant-slider-handle {
  border-color: #ff9800 !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
}

.data-charts .control-item .ant-slider-handle:hover {
  border-color: #f57c00 !important;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.5) !important;
}

.data-charts .control-item .ant-slider-rail {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-charts .chart-container {
    min-height: 150px;
    padding: 6px;
  }
  
  .data-charts .chart-card .ant-card-body {
    padding: 8px;
  }
  
  .data-charts .chart-controls {
    margin-top: 8px;
    padding: 6px 8px;
  }
  
  .data-charts .control-item {
    gap: 6px;
  }
  
  .data-charts .ant-card-head-title {
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .data-charts .chart-container {
    min-height: 120px;
    padding: 4px;
  }
  
  .data-charts .chart-card .ant-card-body {
    padding: 6px;
  }
  
  .data-charts .chart-controls {
    margin-top: 6px;
    padding: 4px 6px;
  }
  
  .data-charts .control-item {
    gap: 4px;
  }
}

/* 图表加载状态 */
.data-charts .chart-container.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0bec5;
  font-size: 14px;
}

.data-charts .chart-container.loading::before {
  content: '📊 加载图表数据...';
}

/* 无数据状态 */
.data-charts .chart-container.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0bec5;
  font-size: 14px;
  flex-direction: column;
  gap: 8px;
}

.data-charts .chart-container.no-data::before {
  content: '📈';
  font-size: 24px;
}

.data-charts .chart-container.no-data::after {
  content: '暂无数据';
  font-size: 12px;
}

/* 图表动画效果 */
.data-charts .chart-container {
  transition: all 0.3s ease;
}

.data-charts .chart-card:hover .chart-container {
  box-shadow: 0 4px 12px rgba(79, 195, 247, 0.2);
}

/* 滑块标签样式 */
.data-charts .control-item .ant-typography {
  margin-bottom: 0 !important;
}

/* 图表工具提示样式覆盖 */
.data-charts .chart-container .chartjs-tooltip {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid #4fc3f7 !important;
  border-radius: 6px !important;
  color: #ffffff !important;
}

/* 图表网格线样式 */
.data-charts .chart-container canvas {
  filter: brightness(1.1);
}

/* 卡片边框样式 */
.data-charts .chart-card {
  border: 1px solid rgba(79, 195, 247, 0.2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.data-charts .chart-card:hover {
  border-color: rgba(79, 195, 247, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease;
}

/* 图表数据点悬停效果 */
.data-charts .chart-container:hover canvas {
  cursor: crosshair;
}

/* 控制面板背景 */
.data-charts .chart-controls {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
